<template>
  <div>
    <div class="input-group">
      <div class="item flex-column flex-middle">
        <div class="label flex-column">用户名</div>
        <input v-model="name" class="input flex-column flex-item" placeholder="请输入用户名"></input>
      </div>
      <div class="item flex-column flex-middle">
        <div class="label">性别</div>
        <o-select @change="sex=$event" :value="sex" :items="selects"></o-select>
      </div>
      <div class="item flex-column flex-middle">
        <div class="label">手机号码</div>
        <input v-model="phone" class="input flex-column flex-item" placeholder="请输入手机号码"></input>
      </div>

       <div class="item flex-column flex-middle">
        <div class="label">地址</div>
        <picker
            style="width:230px;"
            mode="region"
            @change="bindRegionChange"
            :value="area"
          >
            <div class="picker">
              {{area[0]?(area[0]+' '+area[1]+' '+area[2]):'请选择位置'}}
            </div>
          </picker>
          <o-icon icon="icon-arrow-right"></o-icon>
      </div>
      
       <div class="item flex-column flex-middle">
        <div class="label">小区门牌号</div>
        <input v-model="address" class="input flex-column flex-item" placeholder="请输入小区和门牌号"></input>
      </div>
    </div>

    <div class="addBtn flex-middle flex-center flex-item-24">
      <button class="zan-btn" @click="addAdress" size="large">完成</button>
    </div>
  </div>
</template>

<script>
  let AV = require('leancloud-storage/live-query')
  import OSelect from '@/components/select.vue'
  
  export default {
    data() {
      return {
        name: '',
        address:'',
        phone: '',
        showPopup:false,
        area: [],
        // user: null,
        activeIndex: -1, //当前修改
        selects: [{name:'先生',value:'0'},
          {name: '女士', value:'1'},],
        sex: 1,
        // key: value
      }
    },
    components: {OSelect},
    computed: {
      selectAddress() {
        return this.activeIndex<0 || !this.user?null:this.user.get('address')[this.activeIndex]
      }
    },
    async onLoad() {
      this.user = AV.User.current()      
    },
    onShow() {
      let index = this.$mp.query.index
      if (!isNaN(parseInt(index))) {
        this.activeIndex = parseInt(index)
      } else {
        this.activeIndex = -1
      }
      this.initData()
    },
    onUnload() {
      this.user = null
      this.activeIndex = -1
      this.name =''
      this.address=''
      this.phone= ''
    },
    methods: {
      nameChange(e) {
        this.name = e.mp.detail
      },
      sexChange(e) {
        this.sex = e.mp.detail
      },
      addressChange(e) {
        this.address = e.mp.detail
      },
      phoneChange(e) {
        this.phone = e.mp.detail
      },
      initData() {
        if (this.selectAddress) {
          let {name,sex,address,phone,area} = this.selectAddress
          this.sex = sex
          this.name = name
          this.address = address[1]
          this.phone = phone
          this.area = address[0]
        }
      },
      
      bindRegionChange(e) {
        this.area = e.mp.detail.value
      },
      async addAdress() {
        console.log('add ....');
        
        let addressStr = []
        try {
          addressStr = this.user.get('address')||[]
        } catch (error) {
          console.log(error);
        }
        let {name,sex,address,phone,area} = this
        if (!(name&&address&&phone&&area)) {
          return this.$showToast({icon:'none',title:'请完善信息'})
        }
        addressStr.forEach(element => {
          element.isActive = false
        })
        if (this.activeIndex>-1) {
          addressStr[this.activeIndex] = {name,sex,address:[area,address], phone,isActive:true}
        } else {
          addressStr.push({name,sex,address:[area,address], phone,isActive:true})
        }
        
        let res = null
        try {
          this.user.set('address',addressStr)
          res =await this.user.save().catch(err=>{
            console.log(err);
            this.$showToast({icon:'none',title:err})
            
          })
          
        } catch (error) {
          console.log(error);
          
        }
        
        if (res) {
          this.$store.commit('setUser',this.user.toJSON())
          wx.navigateBack({delta:1})
        }
      }
    },
  }
</script>

<style lang="less" scoped>
.input-group {
  font-size: 14px;
  color: #222;
  border-top: 1px solid rgba(0,0,0,.1);
  border-bottom: 1px solid rgba(0,0,0,.1);
  width: calc(100% - 18px);
  padding-left: 15px;
  .item {
    height: 40px;
    border-bottom: 1px solid rgba(0,0,0,.1);
    .label {
      min-width: 90px;
      max-width: 90px;
    }
    input {
      // width: 
      // width: 150px;
    }
  }
}
.addBtn{
  position: fixed;
  bottom: 0px;
  left: 0;
}
</style>